<template>
    <div class="el-input  el-input-group el-input-group--prepend input-auto-resize forbid-select icon-picker cursor-pointer"
        @click.prevent.stop="click" ref="inputRef">
        <div class="el-input__wrapper" tabindex="-1">
            <div class="el-input-group__prepend">
                <el-icon>
                    <component :is="getIcon(modelValue || 'editPen')" />
                </el-icon>
            </div>
            <div class="el-input__inner input_inner">
                {{ modelValue }}
            </div>
        </div>
    </div>
    <div style="width: 100%;height: 0;" @click.stop.prevent>
        <transition name="animate__animated " enter-active-class="animate__fadeIn animate__fast "
            leave-active-class="animate__fadeOut animate__fast">
            <ul class="icon-picker el-dropdown-menu el-popper " v-show="showDropdown">
                <el-scrollbar class="full-percent" tag="div" wrap-class="el-select-dropdown__wrap"
                    view-class="el-select-dropdown__list">
                    <li v-for="item in Object.entries(ElementPlusIconsVue)" :key="item.date"
                        class="el-dropdown-menu__item" @click="chose(item[0])">
                        <el-icon>
                            <component :is="item[1]" />
                        </el-icon>
                    </li>
                </el-scrollbar>
            </ul>
        </transition>
    </div>
</template>

<script setup>
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { useElementBounding } from '@vueuse/core'
import { config } from "@/utils/setting"
import { getIcon } from "@/utils/tools"

const props = defineProps({
    modelValue: {
        type: String,
        default: ""
    }
})

let showDropdown = $ref(false)
const click = () => {
    showDropdown = !showDropdown
}

watch(() => showDropdown, (newVal) => {
    if (newVal) {
        addEventListener('click', click)
    } else {
        removeEventListener('click', click)
    }
})

const inputRef = ref(null)
const inputRefBounding = useElementBounding(inputRef)
let padding = $computed(() => {
    const defaultWidth = config.value.fontSize + 15
    const currentWidth = config.value.fontSize
    const width = inputRefBounding.width.value
    const num = parseInt(width / defaultWidth)
    const perWidth = (defaultWidth - currentWidth + (width - num * defaultWidth) / num) / 2
    return parseInt(perWidth * 100) / 100
})
const emits = defineEmits(["update:modelValue"])

const chose = (key) => {
    showDropdown = false
    emits("update:modelValue", key)
}
</script>

<style scoped>
:deep(.icon-picker) {
    position: relative;
    overflow: hidden;
    top: 1px;
    height: 210px;
    padding: 0;
}

:deep(.el-select-dropdown__list) {
    display: flex;
    flex-wrap: wrap;
}

:deep(.el-select-dropdown__list li) {
    padding: v-bind(padding + 'px');
}

:deep(.el-select-dropdown__list li:hover) {
    background: rgba(173, 173, 173, .5);
    border-radius: var(--border-radius);
}

:deep(.el-select-dropdown__list li i) {
    margin: 0;
}

:deep(.el-scrollbar__bar.is-vertical) {
    display: none;
}

:deep(.input_inner) {
    display: flex;
    align-items: center;
    box-shadow: 1px 0 0 0 var(--el-input-border-color) inset;
    padding-left: 10px;
}

.icon-picker .el-input__wrapper {
    cursor: default;
    padding: 1px !important;
    border-radius: var(--el-input-border-radius);
}

.icon-picker {
    border-radius: var(--el-input-border-radius);
}

.icon-picker .el-input-group__prepend {
    box-shadow: none;
    cursor: default !important;
    color: #606266 !important;
    background-color: transparent;
    min-height: unset;
    margin-left: 1px;
}
</style>